<template>
  <div class="ChildPage TablePage" v-loading="loading">
    <vb-page ref="page" @onTableSelection="doSelect">
      <template #table-testQualified="scope">
        <el-tag :type="scope.row.testQualified === 'qualified'? 'success': 'info'">{{ scope.row.testQualified === 'qualified'? '合格': '未检' }}</el-tag>
      </template>
      <template #footerBtn="data">
        <el-button type="primary" @click="doSelectDownload" icon="el-icon-s-home" size="mini">选择行下载</el-button>
      </template>
      <template #table-pic="scope">
        <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :preview-src-list="scope.row.pic">
        </el-image>
      </template>
      <template #table-handle="scope">
        <el-button type="text" v-if="scope.row.status === 'save'" icon="el-icon-s-promotion" @click="doShow(scope.row)" size="mini">检验</el-button>
        <el-button type="text" icon="el-icon-view" @click="doGetPicShow(scope.row)" size="mini" style="color: #67C23A">查看质检报告</el-button>
      </template>
    </vb-page>
    <div>
      <el-dialog title="上传报告" v-model="show" center width="410px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
        <el-upload
            class="upload-demo"
            drag
            :auto-upload="false"
            :on-change="onchange"
            :on-remove="onRemove"
            action=""
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="footer">
          <el-button  type="primary" icon="el-icon-check" size="small" v-on:click="doSave">确定</el-button>
          <el-button v-on:click="show = false" icon="el-icon-back" size="small">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  <uploadDialog ref="upload_dialog" @success=""></uploadDialog>
  <selectTestModeDialog ref="selectTestModeDialog" @success=""></selectTestModeDialog>
  <getPicDialog ref="getPicDialog" @success="onUploadSuccess"></getPicDialog>
</template>

<script>
import selectTestModeDialog from '../testRoom/selectTestModeDialog.vue'
import getPicDialog from '../testRoom/getPicDialog.vue'
import uploadDialog from '../components/uploadDialog.vue'

export default {
  data() {
    return {
      loading: false,
      show: false,
      selection: null,
      fileList: []
    }
  },

  components: {
    selectTestModeDialog,
    uploadDialog,
    getPicDialog
  },
  methods: {
    async doSelectDownload() {
      if (!this.selection || this.selection.length === 0) {
        this.$message.error('没有选择行')
        return
      }
      let dataList = []
      for(let i = 0; i < this.selection.length; i++) {
        dataList.push(this.selection[i])
      }
      try {
        await this.$confirm(`确定下载检验信息吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.loading = true
      try {
        let res = await this.callApi('download_test_room_list', { dataList: dataList })
        if (!res.res) {
          return
        }
        this.$message.success(`批量下载完成!`)
      } finally {
        this.loading = false
      }
    },
    async doSave() {
      try {
        await this.$confirm(`确定上传吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.loading = true
      try {
        let res = await this.callApi('upload_report', { billNo: this.selection[0].billNo, files: this.fileList[0]})
        if (!res.res) {
          return
        }
        this.$message.success(`上传成功!`)
        this.$refs.page.reload()
      } finally {
        this.loading = false
      }
    },
    openUploadShow() {
      if (!this.selection || this.selection.length === 0 || this.selection.length > 1) {
        this.$message.error('每次只能选择一行')
        return
      }
      this.show = true

    },
    doSelect(data) {
      this.selection = data
    },
    doShow(e) {
      this.$refs.selectTestModeDialog.open(e.billNo, this.doCheck)
    },
    doGetPicShow(row) {
      this.$refs.getPicDialog.open(row)
    },
    /**
     * 文件状态改变时
     * @param e
     */
    onchange(file, fileList) {
      console.log('vvvvvvvvvv', file, fileList)
      this.handleFileList(fileList)
    },
    /**
     * 图片上传成功回调
     * */
    onUploadSuccess (){
      this.$refs.page.reload()
    },
    /**
     *
     * @param e
     */
    onRemove(file, fileList) {
      this.handleFileList(fileList)
    },
    /**
     *
     * @param fileList
     */
    handleFileList(fileList) {
      this.fileList = fileList.map(v => {
        return v.raw
      })
      console.log(fileList, this.fileList)
    },
    async doCheck(billNo, testMode) {
      try {
        await this.$confirm(`确定检验合格吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.loading = true
      try {
        let res = await this.callApi('test_qualified', { billNo: billNo, testMode: testMode})
        if (!res.res) {
          return
        }
        this.$message.success(`检查合格!`)
        this.$refs.page.reload()
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
